<template>
  <div class="box">
    <header class="header searchDetail">
      <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="$router.push('/home')"
      >
        <template #title>
          {{id}}
        </template>
      </van-nav-bar>
    </header>
    <div class="content searchD">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="option" />
        <van-dropdown-item title="筛选" ref="item">
          <van-cell center title="请选择价格区间" class="choose">
            <template #right-icon>
              <input type="text" v-model="min" class="min" placeholder="0">
              ~
              <input type="text" v-model="max" class="max" placeholder="0">
            </template>
          </van-cell>
          <div style="padding: 5px 16px;">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
      <div class="proCont">
        <van-card
          v-for="item in list"
          :key="item.proId"
          :num="item.num"
          :price="item.price"
          :title="item.proName"
          :thumb="item.proImg"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, DropdownMenu, DropdownItem, Switch, Button, Cell, Card, Toast } from 'vant'
import { getSearchPro } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Icon)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Switch)
Vue.use(Button)
Vue.use(Cell)
Vue.use(Card)
Vue.use(Toast)

export default {
  props: ['id'],
  data () {
    return {
      proList: [],
      list: [],
      list0: [],
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: '价格排序', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 }
      ],
      min: null,
      max: null
    }
  },
  methods: {
    onConfirm () {
      this.$refs.item.toggle()
      this.list = this.proList.map(val => val)
      // console.log(this.list)
      if (!this.min || !this.max) {
        Toast('缺少范围区间')
      } else {
        this.list = this.list.filter(val => {
          return val.price <= Math.max(this.min, this.max) && val.price >= Math.min(this.min, this.max)
        })
      }
    }
  },
  mounted () {
    console.log(this.id)
    getSearchPro({
      proName: this.id
    }).then(res => {
      this.proList = res.data.data
      // console.log(this.proList)
      this.list = this.proList
      this.list0 = this.proList
    })
  },
  watch: {
    value (a) {
      console.log(a)
      if (a === 0) {
        this.list = this.list0
      } else if (a === 1) {
        this.list.sort((a, b) => {
          return a.price - b.price
        })
      } else if (a === 2) {
        this.list.sort((a, b) => {
          return b.price - a.price
        })
      }
    }
  }
}
</script>

<style>
.choose.van-cell {
  height: .7rem;
  padding-top: .1rem;
}
.min, .max {
  width: .5rem;
}
</style>
